<template>
    <a-modal :confirm-loading="modalOption.loading" :okText="modalOption.okText" @ok="modalOption.onOk"
             @cancel="modalOption.onCancel" :cancelText="modalOption.cancelText" :width="modalOption.width" :visible="visible"
             :title="modalOption.title">
        <div class="container">
            <a-card hoverable style="margin-bottom:40px " :title="rowKey">
                <a-form-model :label-col="formOption.labelCol" :wrapper-col="formOption.wrapperCol" :layout="formOption.layout" :label-align="formOption.labelAlign">
                    <a-row class="table">
                        <a-col :span="8">
                            <a-form-model-item label="标准">
                                <span>{{formOption.formData.standard || '--'}}</span>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8" v-if="rowKey==='成品检测'">
                            <a-form-model-item label="产品大类">
                                <span>{{formOption.formData.inventoryType || '--'}}</span>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item label="品名">
                                <span>{{formOption.formData.materialName || '--'}}</span>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row class="table">
                        <a-col :span="8">
                            <a-form-model-item :label="tabName+'批号'">
                                <span>{{formOption.formData.batch || '--'}}</span>
                            </a-form-model-item>
                        </a-col>
                        <!-- <a-col :span="8">
                            <a-form-model-item label="生产数量">
                                <span>{{formOption.formData.prodNum || '--'}}kg</span>
                            </a-form-model-item>
                        </a-col> -->
                        <a-col :span="8">
                            <a-form-model-item label="状态">
                                <span v-if="formOption.formData.state" :style="{color:formOption.formData.state == 1 ? '#F76A4A':formOption.formData.state == 2 ?'#FFA842':'#22B585'}">
                                    {{formOption.formData.state == 1 ? '待检验':formOption.formData.state == 2 ? '检验中':'已完(已出报告)'}}
                                    <a-icon v-if="formOption.formData.state == 1" type="exclamation-circle" style="color:#F76A4A" />
                                    <a-icon v-if="formOption.formData.state == 2" type="issues-close" style="color:#FFA842" />
                                    <a-icon v-if="formOption.formData.state == 3" type="check-circle" style="color:#22B585" />
                                </span>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </a-card>
            <a-form-model ref="formModel" :label-col="formOption.labelCol" :wrapper-col="formOption.wrapperCol"
                          :layout="formOption.layout" :label-align="formOption.labelAlign" :hide-required-mark="formOption.hideRequiredMark"
                          :rules="formOption.rules" :model="formOption.formData">
                <div class="tool-bar">
                    <a-card hoverable title="检测">
                        <a-row class="table">
                            <a-col class="col-h" :span="8">
                                <a-form-model-item label="检测机构" prop="mechanism">
                                    <a-input :disabled="viewDetail" v-model="formOption.formData.mechanism" placeholder="请输入检测机构" ></a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col class="col-h" :span="8">
                                <a-form-model-item label="检测负责人" prop="person">
                                    <a-input :disabled="viewDetail" v-model="formOption.formData.person" placeholder="请输入检测负责人" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row class="table">
                            <a-col class="col-h" :span="8">
                                <a-form-model-item label="检测依据" prop="basis">
                                    <a-input :disabled="viewDetail" v-model="formOption.formData.basis" placeholder="请输入检测依据"></a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col class="col-h" :span="8">
                                <a-form-model-item label="报告日期" prop="reportDate">
                                    <a-date-picker class="inputs" valueFormat="YYYY-MM-DD" :locale="formOption.locale" :disabled="viewDetail" v-model="formOption.formData.reportDate" placeholder="请选择报告日期" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row class="table">
                            <a-col  :span="8">
                                <a-form-model-item label="检测结果" prop="state" :wrapperCol="{ style: { width: 'auto' }}">
                                    <a-radio-group :disabled="viewDetail" v-model="formOption.formData.state">
                                        <a-radio value="1">待检验</a-radio>
                                        <a-radio value="2">检验中</a-radio>
                                        <a-radio value="3">已完(已出报告)</a-radio>
                                    </a-radio-group>
                                </a-form-model-item>
                            </a-col>
                            <a-col  :span="8">
                                <a-form-model-item v-if="modalOption.pageReady" label="检测报告" prop="img">
                                    <img v-if="viewDetail" style="width: 250px;" :src="formOption.formData.checkFile"/>
                                    <div v-else>
                                        <Upload v-if="dataReady" :uploadLength="1" :defImgList="formOption.formData.checkFile ? [formOption.formData.checkFile] : []" @uploadChange="imgUpload"></Upload>
                                        <div class="upload-tips">
                                            <div>支持上传jpg、png格式文件，不超过6MB</div>
                                        </div>
                                    </div>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row class="table">
                            <a-col  :span="8">
                                <a-form-model-item label="备注" prop="remark">
                                    <a-textarea placeholder="备注" v-model="formOption.formData.remark"
                                    :auto-size="{ minRows: 2, maxRows: 6 }"/>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-card>
                </div>
            </a-form-model>
        </div>
    </a-modal>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import nextApi from "@/api/nextApi";
import locale from "ant-design-vue/lib/date-picker/locale/zh_CN";
interface CheckData {
    id: string;
    [key: string]: any;
}
@Component({
    name: "addOrEdit",
    components: {
        Upload: () => import("@/components/upload.vue"),
    },
})

export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: ()=>({})}) data!: CheckData;
    @Prop({ default: "" }) rowKey!: string;
    @Prop({default: false}) viewDetail!: boolean;
    @Watch("visible")
    visibleChange(val) {
        if (val) {
            setTimeout(()=>{
                this.modalOption.pageReady = true
                this.getInfo()
            },300)
        }else{
            (this.$refs.formModel as any).resetFields();
            this.formOption.formData = {
                state:undefined
            }
            this.modalOption.pageReady = false
            this.dataReady = false
        }
    }
    dataReady: boolean = false;
    getInfo(){
        nextApi.getCheckDetail({id:this.data.id}).then(res=>{
            if (res.data) {
                this.formOption.formData = {
                    ...res.data,
                }
                console.log(this.formOption.formData);
                
                this.dataReady = true
            } else {
                this.formOption.formData.statementId = this.data.id
                this.formOption.formData.type = this.rowKey
                this.formOption.formData.standard = this.data.standard
                if(this.rowKey == '成品检测'){
                    this.formOption.formData.inventoryType = this.data.productionType
                }
                this.formOption.formData.batch = this.data.batchNumber
                this.formOption.formData.materialName = this.data.productName
                this.formOption.formData.state = undefined
                this.dataReady = true
                console.log(this.formOption.formData);
                
            }
        })
        
    }

    //组件配置
    modalOption: any = {
        pageReady:false,
        width: "90%",
        title: "检测",
        okText: "保存",
        cancelText: "取消",
        loading: false,
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };
    //表单数据源

    //表单配置
    formOption: any = {
        locale: locale,
        labelCol: { style: { width: "100px" } },
        wrapperCol: { style: { width: "200px" } },
        layout: "inline",
        labelAlign: "right",
        hideRequiredMark: false,
        formData: {
            state:undefined
        },
        rules: {
            mechanism: [{ required: false, message: "请选择检测机构", trigger: "change" }],
            person: [{ required: false, message: "请输入检测负责人", trigger: "blur" }],
            reportDate: [{ required: false, message: "请选择报告日期", trigger: "change" }],
            state: [{ required: false, message: "请选择检测结果", trigger: "change" }],
            basis: [{ required: false, message: "请选择检测依据", trigger: "change" }],
        },
    };
    modalOk(){
        (this.$refs.formModel as any).validate(async (valid: boolean) => {
            if (!valid) return;
            this.modalOption.loading = true;
            try {
                const res = await nextApi.check(this.formOption.formData)
            }finally {
                this.modalOption.loading = false;
                this.closeModal();
            }
        })
    }
    /**
     * @description 处理一些数据的方法
     *  **/
    closeModal() {
        this.$emit("closeModal");
    }
    /**
     * @description 图片上传器回调
     * **/
    imgUpload(img:any){
        img.length ? this.formOption.formData.checkFile = img[0].url:this.formOption.formData.checkFile = ''
    }
    get tabName(){
        switch (this.rowKey){
            case '饮片检测':
                return '前处理'
            case '提取物检测':
                return '混一'
            case '颗粒检测':
                return '制粒'
            case '成品检测':
                return '成品'
        }
    }
}
</script>
<style scoped lang="scss">
.container {
    padding: 0px;
    .MR-10 {
        margin-right: 10px;
    }
    .inputs {
        width: 200px;
    }
    .tool-bar {
        margin-bottom: 20px;

    }
    .table {
        margin-top: 20px;
    }
    .col-h{
        height: 2.4rem;
    }
}
</style>
